<template>
  <div class="w-full h-[30px] flex flex-row justify-between items-center">
    <!-- 自定义左右滑动控件 -->
    <div class="custom-prev-btn">
      <svg
        t="1735029182059"
        class="w-[30px] h-[16px] fill-primary"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1098"
        width="200"
        height="200"
      >
        <path
          d="M784.652701 955.6957 346.601985 517.644983c-2.822492-2.822492-2.822492-7.902977 0-11.289967l439.179713-439.179713c6.77398-6.77398 10.725469-16.370452 10.725469-25.966924L796.507166 36.692393c0-20.32194-16.370452-36.692393-36.692393-36.692393l-4.515987 0c-9.596472 0-19.192944 3.951488-25.966924 10.725469L250.072767 489.420066c-12.418964 12.418964-12.418964 32.740904 0 45.159868l477.565601 477.565601c7.338479 7.338479 17.499449 11.854465 28.224917 11.854465l0 0c22.015436 0 40.079383-18.063947 40.079383-40.079383l0 0C796.507166 973.759647 791.99118 963.598677 784.652701 955.6957z"
          p-id="1099"
        ></path>
      </svg>
    </div>
    <swiper
      :slidesPerView="'auto'"
      :spaceBetween="10"
      :freeMode="true"
      :modules="modules"
      :navigation="{
        nextEl: '.custom-next-btn',
        prevEl: '.custom-prev-btn',
      }"
      @reachBeginning="onReachBeginning"
      @reachEnd="onReachEnd"
      class="w-full h-[30px]"
    >
      <swiper-slide
        class="flex justify-start items-center w-auto"
        v-for="(slide, index) in props.hotWords"
        :key="index"
      >
        <div
          class="bg-primary text-white px-[16px] py-[2px] rounded-[12px] text-sm cursor-pointer"
          @click.stop="handleSendMessage(slide.issueName)"
        >
          {{ slide.issueName }}
        </div>
      </swiper-slide>
    </swiper>
    <div class="custom-next-btn">
      <svg
        t="1735029199955"
        class="w-[30px] h-[16px] fill-primary"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1245"
        width="200"
        height="200"
      >
        <path
          d="M246.121279 955.6957l438.050717-438.050717c2.822492-2.822492 2.822492-7.902977 0-11.289967L244.992282 67.175303c-6.77398-6.77398-10.725469-16.370452-10.725469-25.966924L234.266814 36.692393C234.266814 16.370452 250.637266 0 270.959206 0l4.515987 0c9.596472 0 19.192944 3.951488 25.966924 10.725469l478.694598 478.694598c12.418964 12.418964 12.418964 32.740904 0 45.159868l-477.565601 477.565601c-7.338479 7.338479-17.499449 11.854465-28.224917 11.854465l0 0c-22.015436 0-40.079383-18.063947-40.079383-40.079383l0 0C234.266814 973.759647 238.7828 963.598677 246.121279 955.6957z"
          p-id="1246"
        ></path>
      </svg>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { type hotwords } from '#/request'
  import 'swiper/css'
  import 'swiper/css/free-mode'
  import { Navigation } from 'swiper/modules'
  import { Swiper, SwiperSlide } from 'swiper/vue'
  import { type PropType, ref } from 'vue'
  import sendMessage from "@/plugins/message.ts";
  const modules = [Navigation]
  const props = defineProps({
    hotWords: {
      type: Array as PropType<hotwords[]>,
      default: () => [],
    },
  })
  // 控制按钮的禁用状态
  const isPrevDisabled = ref(false)
  const isNextDisabled = ref(false)

  // 监听滑块到达开头或结尾时的事件
  const onReachBeginning = () => {
    isPrevDisabled.value = true
    isNextDisabled.value = false
  }

  const onReachEnd = () => {
    isNextDisabled.value = true
    isPrevDisabled.value = false
  }
  function handleSendMessage(value) {
    sendMessage(value, () => {})
  }
</script>
<style scoped></style>
